<template>
    <div>
        <div style="margin-top:20px;margin-bottom:20px">
            <van-nav-bar title="业主/经纪" left-arrow color="black" @click="onClickLeft">
  <template #right>
    <van-icon name="chat-o" dot color="black" size="18"/>
  </template>
</van-nav-bar>
        </div>
        <div style="width:360px;height:85px;margin-left:15px;display:flex;">
            <div><img src="https://cdn8.axureshop.com/demo2024/2266108/images/%E6%88%BF%E4%B8%9C%E4%BF%A1%E6%81%AF/u711.svg"></div>
            <div>
                <p style="font-size:16px;font-weight:400;margin-left:15px;">李小红女士
                    <br><span style="font-size:12px;color:gray;">个人房东</span>
                </p>
                
            </div>
            <div>
                <p style="font-size:12px;color:gray;margin-top:30px;margin-left:125px;">信用良好 70分</p>
            </div>
        </div>
        <div style="width:360px;height:140px;margin-bottom:20px;margin-left:15px;background-color:#f8f8f8;border-radius:15px;">
           <div style="height:70px;display:flex;">
                <div style="margin-top:25px;margin-left:15px;">
                    <img src="https://cdn8.axureshop.com/demo2024/2266108/images/%E6%88%BF%E4%B8%9C%E4%BF%A1%E6%81%AF/u702.svg">
                </div>
                <div style="margin-left:15px;">
                    <p>实名认证
                       <br> <span style="font-size: 12px;color:gray;">人脸已认证</span>
                    </p>
                </div>
                <div style="margin-top:10px;margin-left:185px">
                    <p style="color:#5ebc4d">已认证</p>
                </div>
           </div>
           <div style="height:70px;display:flex;">
            <div style="margin-top:25px;margin-left:15px;">
                    <img src="https://cdn8.axureshop.com/demo2024/2266108/images/%E6%88%BF%E4%B8%9C%E4%BF%A1%E6%81%AF/u703.svg">
                </div>
                <div style="margin-left:15px;">
                    <p>响应率
                       <br> <span style="font-size: 12px;color:gray;">
                        电话响应率50% 微聊回复率100%
                       </span>
                    </p>
                </div>
                <div style="margin-top:10px;margin-left:86px;">
                    <p style="color:#f7b26a">极快</p>
                </div>
           </div>
        </div>
        <div style="width:360px;margin-left:15px;"> 
            <h4 style="margin-bottom:23px;">TA的房源</h4>
            <div style="height:80px;display: flex;">
                <div>
                   <img src="https://cdn8.axureshop.com/demo2024/2266108/images/%E6%88%BF%E4%B8%9C%E4%BF%A1%E6%81%AF/u718.svg" @click="router.push('/xiang')">
                </div>
                <div style="margin-left:15px;">
                    <p style="font-size: 13px;font-weight:700;margin-top:-2px">整租 | 实图真价 福田金地大百汇...</p>
                    <p style="font-size: 10px;color:gray;">2室 78m*彩天名苑 岗夏</p>
                    <p>
                        <span style="color:#f57c00">7000元/月</span>
                        
                    </p>
                </div>

            </div>
        </div>
        
        <div style="width:360px;margin-left:15px;position:fixed;bottom:0;">
            <el-button type="primary" style="background-color:#f57c00;border:1px solid #f57c00;width:175px">微聊</el-button>
            <el-button type="primary" style="background-color:#e23940;border:1px solid #e23940;width:175px;margin-left:10px">电话</el-button>
        </div>




    </div>
  </template>
  
  <script setup lang="ts" >
import { Icon, NavBar  } from 'vant';
import {ref,computed, onMounted} from 'vue'
// import axios from 'axios'
import {useRouter,useRoute} from 'vue-router'
const route=useRoute()
const router=useRouter()
const onClickLeft = () => history.back()
  </script>
  
  <style>
  
  </style>